<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%  

  if(session.getAttribute("userbase") == null)
  {
    response.sendRedirect("login.jsp");
  }
%>
<head>
  <title>酒店管理系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css">
  <style>
    body {
      margin: 0px;
    }

    /* 所有 */
    #app {
      width: 100%;
      height: 100%;
    }

    /* 头 */
    .header {
      color: rgba(255, 255, 255, 0.75);
      line-height: 60px;
      text-align: center;
      background-color: #545c64;
    }

    .header div {
      display: inline;
    }

    .title {}

    .author {
      float: right;
    }

    .author-img {
      width: 20px;
      height: 20px;
    }

    .author-github {
      cursor: pointer;
    }

    /* 内容区 */
    .container {
      min-height: 600px;
      width: 100%;
      height: 100%
    }

    /* 左边内容区 */
    .left {
      color: #4b595f;
      width: 200px;
    }

    .left .totalUl {
      height: 93%;
    }

    /* 右边内容区 */
    .right {
      min-width: 200px;
    }

    tbody {
      font-size: 15px;
      color: #4b595f;
    }

    .footer {
      background-color: #24292e;
      width: 100%;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container class="container">
      <el-header class="header">
        <el-menu :default-active="activeTopIndex" class="el-menu-demo" mode="horizontal" @select="handleTopManuSelect"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="1">酒店管理系统</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
          <el-menu-item index="5" style="float: right;" @click="logout"> 退出  </el-menu-item>

        </el-menu>

      </el-header>

      <el-container>
        <el-aside class="left">
          <el-menu :default-active="activeLeftIndex" class="totalUl">
            <el-menu-item index="1" @click="open(aboutMeUrl)"><i class="el-icon-service"></i>客服中心</el-menu-item>
            <el-submenu :index="firstMenu.id" v-for="firstMenu in menus" :key="firstMenu.id">
              <template slot="title"><i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}</template>
              <el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
                <template slot="title">{{ secondMenu.name }}</template>
                <el-menu-item v-for="thirdMenu in secondMenu.children" :index="thirdMenu.id" :key="thirdMenu.id"
                  @click="open(thirdMenu.url)">{{ thirdMenu.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
        </el-aside>

        <el-main class="right">
          <iframe style="width:100%; height:100%; border: 0;" :src="iframeUrl"></iframe>
        </el-main>
      </el-container>
      <el-footer class="footer">

      </el-footer>
    </el-container>

  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script type="text/javascript" src="lib/elementui/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        activeTopIndex:"1",
        activeLeftIndex: "1",
        aboutMeUrl: "aboutme.html",
        iframeUrl: "aboutme.html",

        menus: [
          {
            name: "订单管理",
            id: "date",
            iconClass: "el-icon-time",
            children: [
              {
                name: "DatePicker 日期选择器",
                id: "DatePicker",
                children: [
                  { name: "年月日时分", id: "DatePicker-demo1", url: "date/demoElDatePicker.html" },
                  { name: "多日期选择", id: "DatePicker-mutidemo", url: "date/demoMultipleDate.html" }
                ]
              }
            ]
          },
          {
            name: "客房管理",
            id: "form",
            iconClass: "el-icon-edit-outline",
            children: [
              {
                name: "Input",
                id: "input",
                children: [
                  { name: "添加客房", id: "addhouse", url: "house/houseAdd.jsp" },
                  { name: "客房管理", id: "housemanager", url: "house/houseManager.jsp" }
                ]
              },
              {
                name: "validateRules",
                id: "validateRules",
                children: [
                  { name: "动态修改校验规则", id: "validateRules-demo", url: "form/validateRules.html" }
                ]
              }
            ]
          },
          {
            name: "账单管理",
            id: "Table",
            iconClass: "el-icon-tickets",
            children: [
              {
                name: "自定义列模板",
                id: "ZDYLMB",
                children: [
                  { name: "全部都是自定义列", id: "zdylmb-demo1", url: "table/defineTemplateSelf.html" },
                  { name: "自定义表头", id: "custom-table-header", url: "table/customTableHeader.html" },
                  { name: "将列封装为组件", id: "component-demo1", url: "table/componentTable.html" },
                  { name: "动态渲染整个表格", id: "dynamic-table", url: "table/dynamicTable.html" }
                ]
              },
              {
                name: "多选表格",
                id: "DXBG",
                children: [
                  { name: "反正官网上没有这个demo", id: "DXBG-demo1", url: "table/checkbox1.html" }
                ]
              }
            ]
          },
          {
            name: "用户管理",
            id: "Dialog",
            iconClass: "el-icon-message",
            children: [
              {
                name: "Notification 通知",
                id: "notification",
                children: [
                  { name: "用户管理", id: "noti-demo1", url: "user/userManager.jsp" }
                ]
              }
            ]
          },
        ]
      },
      methods: {
        handleTopManuSelect() {

        },
        logout() {
          axios.post("/logout").then(res=>{
            window.location.href = "/login.jsp"
          })
        },
        open(url) {
          this.iframeUrl = url;
        },
        openGitHub() {
          window.open("https://github.com/yuleGH", "_blank");
        }
      }
    });
  </script>

</body>

</html>